<template>
  <view style="width: 100%;height: 100%;">
    <view class="root">
      <view class="content">
        <uni-forms ref="formRef" :model="form" validateTrigger="blur" label-position="top" label-width="100%"
          err-show-type="toast">
          <view class="content-wrapper">
            <view class="content-inner-wrapper">
              <uni-forms-item label="购买人姓名:" name="buyerName" required key="buyerName">
                <view class="form-content-item" :class="form.buyerName ?  '' : 'input-item'">
                  <uni-easyinput type="text" v-model="form.buyerName" :inputBorder="false" placeholder="请填写"
                    :clearable="true" />
                </view>
              </uni-forms-item>
              <uni-forms-item label="身份证号:" name="buyerIdCard" required key="buyerIdCard">
                <view class="form-content-item" :class="form.buyerIdCard ?  '' : 'input-item'">
                  <uni-easyinput type="idcard" :maxlength="18" v-model="form.buyerIdCard" :inputBorder="false"
                    placeholder="请填写" :clearable="true" />
                </view>
              </uni-forms-item>
              <uni-forms-item label="联系电话:" name="buyerPhone" required key="buyerPhone">
                <view class="form-content-item" :class="form.buyerPhone ?  '' : 'input-item'">
                  <uni-easyinput type="number" :maxlength="11" v-model="form.buyerPhone" :inputBorder="false"
                    placeholder="请填写" :clearable="true" />
                </view>
              </uni-forms-item>
              <uni-forms-item label="购买时间:" name="buyerTime" required key="buyerTime">
                <view class="form-content-item" :class="form.buyerTime ?  '' : 'input-item'">
                  <uni-datetime-picker v-model="form.buyerTime" type="datetime" :hide-second="true"
                    :end="moment().hour(23).minute(59).second(59).millisecond(999).valueOf()">
                    <uni-easyinput type="text" v-model="form.buyerTime" :inputBorder="false" placeholder="请选择"
                      :clearable="true" disabled />
                  </uni-datetime-picker>
                </view>
              </uni-forms-item>
              <uni-forms-item label="购买数量:" name="buyerNumber" required key="buyerNumber">
                <view class="form-content-item" :class="form.buyerNumber ?  '' : 'input-item'">
                  <uni-easyinput type="digit" v-model="form.buyerNumber" :inputBorder="false" placeholder="请选择"
                    :clearable="true">
                    <view slot="right" style="font-weight: bold;font-size: 28rpx;color: #000000;padding-right: 20rpx;">升
                    </view>
                  </uni-easyinput>
                </view>
              </uni-forms-item>
            </view>
          </view>
        </uni-forms>
      </view>
      <view class="bottom">
        <yy-button-submit @submit="onSubmit"></yy-button-submit>
      </view>
    </view>
  </view>
</template>

<script>
  import _ from '@/utils/lodash.js'
  import uploadFileMixin from '../../utils/upload-file-mixin'
  import {
    Toast,
    generateUrlOptions,
    getOptionsParams,
    idCardRule,
    isLoading,
    navBack,
    phoneRule
  } from '../../utils/util'
  import {
    oilSaleAdd
  } from '../../api/api'

  import moment from '@/utils/moment'
  export default {
    mixins: [uploadFileMixin],
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        routerParams: {},
        formRef: null,
        form: this.initForm(),
        rules: {
          buyerName: {
            rules: [{
              required: true,
              errorMessage: "请填写购买人姓名！",
            }]
          },
          buyerIdCard: {
            rules: idCardRule()
          },
          buyerPhone: {
            rules: phoneRule()
          },
          buyerTime: {
            rules: [{
              required: true,
              errorMessage: "请选择购买时间！",
            }]
          },
          buyerNumber: {
            rules: [{
              required: true,
              errorMessage: "请填写购买数量！",
            }]
          },
        },
      }
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
    },
    onReady() {
      this.$refs.formRef.setRules(this.rules)
    },
    methods: {
      moment,
      initForm() {
        return {
          buyerName: '',
          buyerIdCard: '',
          buyerPhone: '',
          buyerTime: '',
          buyerNumber: ''
        }
      },
      onSubmit() {
        this.$refs.formRef.validate().then(() => {
            let data = {
              companyMessageId: this.routerParams.companyMessageId,
              ...this.form,
              buyerTime: this.form.buyerTime ? moment(this.form.buyerTime).format('YYYY/MM/DD HH:mm:ss') : '',
            };
            isLoading(true)
            oilSaleAdd(data).then((res) => {
                if (res.code == 200) {
                  setTimeout(() => {
                    navBack();
                  }, 100)
                  uni.$emit('bulkOilAdd')
                }
                Toast(res.message);
              })
              .finally(() => {
                isLoading(false)
              })
          })
          .catch(() => {})
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../styles/uni-form-label-top.scss';

  .root {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    background: #F9F9F9;

    .content {
      flex: 1;
      height: 0;
      overflow: auto;

      .content-wrapper {
        background: #FFFFFF;
        box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(207, 207, 207, 0.1608);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        padding: 40rpx 20rpx;
        margin-bottom: 10rpx;
      }
    }
  }
</style>